<template>
  <div :id="id" :class="className" :style="{width:width,height:height}"></div>
</template>
<script>
  import echarts from 'echarts';

  require('echarts/theme/macarons') // echarts theme

  export default {
    name: 'BarChart',
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'id'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '400px'
      },
      chartData: {}

    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      //console.log(echarts.version);
      this.initChart();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null
    },
    methods: {
      //初始化图表
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        // 绘制图表
        this.chart.setOption({
          title: {
            text: this.chartData.title
          },
          tooltip: {},
          xAxis: {
            data: this.chartData.xAxis
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: this.chartData.type,
            data: this.chartData.dataList
          }]
        });
        let that=this;
        //柱状图点击事件
        this.chart.on('click', function (params) {
          that.show(params.name);
          console.log(params.name)
        })
      },
      show(message) {
        //alert(message)
        this.$message(message);
      },
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
